<template>
    <div class="add">
        <div class="title">预配舱单</div>
        <div style="overflow: auto;height: 80%;">
            <div>
                <el-form ref="addForm" :model="addForm" label-width="120px" size="small" inline :rules="rules"
                    label-position="top">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="舱单传输人名称" prop="personName" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.personName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输工具离境地海关代码" prop="leaveCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.leaveCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输工具代理企业代码" prop="enterpriseCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.enterpriseCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="承运人代码" prop="carrierCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.carrierCode"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="航次航班编号" prop="flightNmb" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.flightNmb"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输方式" prop="transportType" class="formStyle">
                                <el-select v-model="addForm.transportType" placeholder=" " clearable disabled>
                                    <el-option label="海运" value="1"></el-option>
                                    <el-option label="空运" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输工具代码" prop="transportCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.transportCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输工具名称" prop="transportName" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.transportName"></el-input>
                            </el-form-item></el-col>
                    </el-row>
                    <!-- <el-row>
                        <el-col :span="8">
                            <el-form-item label="运输工具抵达关境内第一个目的港代码" prop="destinationCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.destinationCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="运输工具抵达关境内第一个目的港的日期和时间" prop="destinationTime" class="formStyle">
                                <el-date-picker v-model="addForm.destinationTime" type="date" placeholder="选择日期"
                                    style="width: 100%;" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="运输工具启运日期和时间" prop="dataTime" class="formStyle">
                                <el-date-picker v-model="addForm.dataTime" type="date" placeholder="选择日期"
                                    style="width: 100%;" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark" class="formStyle" style="width: 93%;">
                                <el-input placeholder=" " clearable v-model="addForm.remark"></el-input>
                            </el-form-item></el-col>
                    </el-row>




                </el-form>
            </div>
            <div class="table">
                <div class="tableTop">
                    <div>提（运）单</div>
                    <div> <el-button type="primary" size="mini" style="background-color:#0F47B8"
                            @click.native="addButton">新增</el-button></div>
                </div>
                <div style="border: 1px solid #EDEFF2;">
                    <el-table :data="tableData" stripe style="width: 100%;max-height: 300px;">
                        <!-- <el-table-column type="selection" width="55">
                        </el-table-column> -->
                        <el-table-column label="总提(运)单号" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.oddNumber }}</template>
                        </el-table-column>
                        <el-table-column label="装货地代码" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.loadingCode }}</template>
                        </el-table-column>
                        <el-table-column label="货物装载运输工具时间" min-width="180px">
                            <template slot-scope="scope">{{ scope.row.loadingTime }}</template>
                        </el-table-column>
                        <el-table-column label="卸货地代码" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.landingCode }}</template>
                        </el-table-column>
                        <el-table-column label="运费支付方法" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.payMethod }}</template>
                        </el-table-column>
                        <el-table-column label="货物总件数" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.totalNumber }}</template>
                        </el-table-column>
                        <el-table-column label="包装种类代码" min-width="120px">
                            <template slot-scope="scope">{{ scope.row.packageCode }}</template>
                        </el-table-column>
                        <el-table-column label="货物总毛重（单位：千克）" min-width="200px">
                            <template slot-scope="scope">{{ scope.row.packageWeight }}</template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="250px">
                            <template slot-scope="scope">
                                <div>
                                    <el-button @click.native.prevent="messageButton(scope.$index, scope.row)"
                                        type="text" style="color: #0F47B8;" size="small">
                                        集装箱(器)信息
                                    </el-button>
                                    <el-button @click.native.prevent="productButton(scope.$index, scope.row)"
                                        type="text" style="color: #0F47B8;" size="small">
                                        商品项信息
                                    </el-button>
                                    <el-button @click.native.prevent="editButton(scope.$index, scope.row)"
                                        type="text" style="color: #0F47B8;" size="small">
                                        编辑
                                    </el-button>
                                    <el-button @click.native.prevent="delButton(scope.$index, scope.row)" type="text"
                                        style="color: #FF3838;" size="small">
                                        删除
                                    </el-button>

                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="btn">
                <div>
                    <el-button type="primary" size="small" style="background-color:#043AA7"
                        @click.native="onSubmit">提交</el-button>
                </div>
            </div>
        </div>
        <!-- 新增对话框 -->
        <el-dialog :visible.sync="addShow" center :show-close="false" width="60%">
            <div v-if="addShow" style="height: 500px;">
                <addPage :title="titleShow" :currentRow="currentRow" :closePage="getData"></addPage>
            </div>
        </el-dialog>
        <!-- 集装箱(器)信息对话框 -->
        <el-dialog :visible.sync="messageShow" center :show-close="false" width="40%" append-to-body>
            <div v-if="messageShow">
                <messagePage :childrenData="childrenData" :closePage="changeData"></messagePage>
            </div>
        </el-dialog>
        <!-- 商品项信息对话框 -->
        <el-dialog :visible.sync="productShow" center :show-close="false" width="40%" append-to-body>
            <div v-if="productShow">
                <productPage :childrenData="childrenData1" :closePage="changeProductData"></productPage>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import addPage from "./subPages/addPage.vue";
import messagePage from "./subPages/messagePage.vue";
import productPage from "./subPages/productPage.vue";
export default {
    name: 'shippingManifest',
    components: { addPage, messagePage, productPage },
    data() {
        return {
            titleShow: "",
            currentIndex: "",
            currentRow: "",
            addShow: false,
            messageShow: false,
            productShow: false,
            addForm: {
                personName: "",
                leaveCode: "",
                enterpriseCode: "",
                carrierCode: "",
                flightNmb: "",
                transportType: "",
                transportCode: "",
                transportName: "",
                // destinationCode: "",
                // destinationTime: "",
                // dataTime: "",
                remark: "",
            },
            tableData: [],
            childrenData: [],
            childrenData1: [],
            rules: {
                personName: [
                    { required: true, message: '请输入舱单传输人名称', trigger: 'change,blur' },
                ],
                leaveCode: [
                    { required: true, message: '请输入运输工具离境地海关代码', trigger: 'change,blur' },
                ],
                carrierCode: [
                    { required: true, message: '请输入承运人代码', trigger: 'change,blur' },
                ],
                flightNmb: [
                    { required: true, message: '请输入航次航班编号', trigger: 'change,blur' },
                ],
                transportType: [
                    { required: true, message: '请选择运输方式', trigger: 'change,blur' },
                ],
                transportCode: [
                    { required: true, message: '请输入运输工具代码', trigger: 'change,blur' },
                ],
                transportName: [
                    { required: true, message: '请输入运输工具名称', trigger: 'change,blur' },
                ],
                dataTime: [
                    { required: true, message: '请选择运输工具启运日期和时间', trigger: 'change,blur' },
                ],
            },
        }
    },
    methods: {
        //新增对话框控制按钮
        addButton() {
            this.currentIndex = ""
            this.currentRow = {}
            this.addShow = true
            this.titleShow = "新增"
        },
        //集装箱(器)信息控制按钮
        messageButton(index, row) {
            this.messageShow = true
            this.childrenData = row.childrenData ? [...row.childrenData] : []
            this.currentIndex = index
        },
        //商品项信息控制按钮
        productButton(index, row) {
            this.productShow = true
            this.childrenData1 = row.childrenData1 ? [...row.childrenData1] : []
            this.currentIndex = index
        },
        // 删除控制按钮
        delButton(index, item) {
            this.tableData.splice(index, 1)
        },
        editButton(index, item) {
            this.currentIndex = index
            this.currentRow = item
            this.addShow = true
            this.titleShow = "编辑"
        },
        //关闭对话框控制按钮
        getData(type, item) {
            this.addShow = false
            if (type == "新增") {
                this.tableData.push(item)
            } else if (type == "编辑") {
                this.$set(this.tableData, this.currentIndex, item)
            } else {
                return false
            }
        },
        changeData(type, item) {
            this.messageShow = false
            this.tableData[this.currentIndex].childrenData = [...item]
        },
        changeProductData(type, item) {
            this.productShow = false
            // this.tableData[this.currentIndex].childrenData = [...item]
        },
        onSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            })
        },
    },

    computed: {
    },
    watch: {},

    mounted() {
        let params = {
            addForm: {
                personName: "",
                leaveCode: "",
                enterpriseCode: "",
                carrierCode: "",
                flightNmb: "",
                transportType: "1",
                transportCode: "",
                transportName: "",
                // destinationCode: "",
                // destinationTime: "2024-04-24",
                // dataTime: "2024-04-24",
                remark: "",
            },
            tableData: [
                {
                    oddNumber: "",
                    carriageCode: "",
                    statusCode: "",
                    payMethod: "到付",
                    totalNumber: "",
                    packageCode: "",
                    packageWeight: "",
                    dangerousContactName: "",
                    dangerousContactType: "",
                    loadingCode: "",
                    loadingTime: "",
                    landingCode: "",
                    receiptLocationCode: "",
                    receiptLocationName: "",
                    transitPointCode: "",
                    transitDestinationCode: "",
                    countryCode: "",
                    arrivalDateTime: "",
                    consigneeName: "",
                    consigneeAddress: "",
                    consigneeCountryCode: "",
                    consigneeEnterpriseCode: "",
                    consigneeCommunicationMethod1: "",
                    consigneeCommunicationPhone1: "",
                    consigneeCommunicationMethod2: "",
                    consigneeCommunicationPhone2: "",
                    consigneeCommunicationMethod3: "",
                    consigneeCommunicationPhone3: "",
                    shipperName: "",
                    shipperAddress: "",
                    shipperCountryCode: "",
                    shipperEnterpriseCode: "",
                    shipperCommunicationMethod: "",
                    shipperCommunicationPhone: "",
                    notifierName: "",
                    notifierAddress: "",
                    notifierCountryCode: "",
                    notifierCommunicationMethod1: "",
                    notifierCommunicationPhone1: "",
                    notifierCommunicationMethod2: "",
                    notifierCommunicationPhone2: "",
                    notifierCommunicationMethod3: "",
                    notifierCommunicationPhone3: "",
                    childrenData: [{
                        numInfor: "",
                        sizeType: "FR20",
                        sourceCode: "承运人提供箱",
                        weigthEmptyCode: "重箱",
                        sealType: "",
                    }],
                    childrenData1: [{
                        serialNumber: "",
                        packagesNumber: "",
                        packageTypeCode: "",
                        dangerousNumber: "",
                        customsTariffNumber: "",
                        weightOfGoods: "",
                        mark: "",
                        containerNumber: "",
                        itemDescription: "",
                        remark: "",
                    }],
                }
            ]
        }
        this.tableData = [...params.tableData]
        this.addForm = { ...params.addForm }
    },

}
</script>
<style lang='less' scoped>
/deep/ .el-input.is-disabled .el-input__inner {
    color: #666
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
    color: #666
}

.add {
    //text-align: center;
    background-color: #fff;
    height: 90%;
    padding: 60px 40px;
    position: relative;

    .btn {
        margin-top: 2%;
        text-align: center;

        .el-button {
            width: 100px;
        }
    }

    .formStyle {
        // margin-right: 50px;
        width: 70%;

        /deep/ .el-input__inner {
            border-top: none;
            border-left: none;
            border-right: none;
            border-radius: 0;
        }

        /deep/ .el-textarea__inner {
            border-top: none;
            border-left: none;
            border-right: none;
            border-radius: 0;
        }
    }

    .title {
        position: absolute;
        background: #0f47b8;
        height: 40px;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 18px;
        padding-left: 20px;
        top: 0;
        left: 0;
        right: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .table {
        // height: 350px;
        width: 100%;

        .tableTop {
            height: 40px;
            background-color: #EDEFF2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1%;
        }
    }
}

/deep/ .el-dialog__header {
    padding: 0;
}
</style>